<template>
  <div class="tbody">
    <el-steps :active="active" finish-status="success">
      <el-step title="开始"></el-step>
      <el-step title="身份验证"></el-step>
      <el-step title="重置密码"></el-step>
    </el-steps>
    <div id="one">
      <el-form ref="infoForm" :model="infoForm" :rules="infoRules"  style="margin-top: 50px">
        <div class="info" v-if="active===1">
          <el-form-item prop="phone">
            <el-input v-model="infoForm.phone" placeholder="请输入电话" type="text"></el-input>
          </el-form-item>
          <el-form-item prop="email">
            <el-input type="text" v-model="infoForm.email" placeholder="请输入邮箱" ></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input type="text" v-model="infoForm.code" placeholder="请输入验证码" style="width:50%"></el-input>
            <el-button type="primary" style="margin-left: 25px" plain @click="send('infoForm')">发送验证码</el-button>
          </el-form-item>
          <el-button style="margin-top: 12px;" @click="back">返回</el-button>
          <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
        </div>
      </el-form>
      <el-form ref="passForm" :model="passForm" :rules="passRules"  style="margin-top: 50px">
        <div class="info" v-if="active===2">
          <el-form-item prop="password">
            <el-input v-model="passForm.password" type="password" placeholder="新密码" style="width:30%"></el-input>
          </el-form-item>
          <el-form-item prop="newPassword">
            <el-input v-model="passForm.newPassword" type="password" placeholder="确认密码" style="width:30%"></el-input>
          </el-form-item>
          <el-button style="margin-top: 12px;" @click="last">上一步</el-button>
          <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
        </div>
        <div class="info" v-if="active===3">
          <span>密码修改成功，{{count}}秒之后自动返回登录</span>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {getWbeRoot} from '../../api/web-site'
import axios from 'axios'

export default {
  name: 'changePass',
  data () {
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.passForm.password !== '') {
          this.$refs.passForm.validateField('checkPass')
        }
        callback()
      }
    }
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.passForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

    return {
      active: 1,
      infoForm: {
        phone: '',
        email: '',
        code: ''
      },
      passForm: {
        password: '',
        newPassword: ''
      },
      infoRules: {
        phone: [{required: true, message: '请输入电话', trigger: 'blur'}],
        email: [{required: true, message: '请输入邮箱', trigger: 'blur'}]
      },

      passRules: {
        password: [{validator: validatePass, trigger: 'blur'}],
        newPassword: [{validator: validatePass2, trigger: 'blur'}]
      },

      flag: null,
      count: '' // 倒计时
    }
  },

  methods: {
    // 发送验证码
    send (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          axios.get(getWbeRoot() + 'api/email/send', {
            params: {
              phone: this.infoForm.phone,
              email: this.infoForm.email
            }
          }).then(response => {
            let data = response.data
            console.log(data)
            if (data.code === '200') {
              this.$notify({
                title: '提示',
                message: '验证码发送成功',
                type: 'success'
              })
            } else {
              this.$notify({
                title: '提示',
                message: '验证码发送失败'
              })
            }
          }, error => {
            console.log(error.message)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    // 校验验证码
    checkCode () {
      if (this.infoForm.phone.trim() !== '' && this.infoForm.email.trim() !== '' && this.infoForm.code.trim() !== '') {
        return true
      } else {
        this.$notify({
          showClose: true,
          message: '请完善信息',
          type: 'warning',
          offset: 20
        })
        return false
      }
    },
    back () {
      this.$router.push('/')
    },
    last () {
      if (this.active > 1) this.active--
    },
    next () {
      if (this.active === 1) {
        if (this.checkCode()) {
          axios.get(getWbeRoot() + 'api/register/check', {
            params: {
              phone: this.infoForm.phone,
              code: this.infoForm.code
            }
          }).then(response => {
            let data = response.data
            if (data.code === '200') {
              this.$notify({
                title: '提示',
                message: '身份验证通过',
                type: 'success'
              })
              this.active++
            } else {
              this.$notify({
                title: '提示',
                message: '验证码错误'
              })
            }
          }, error => {
            console.log(error.message)
          })
        }
      }

      if (this.active === 2) {
        this.$refs.passForm.validate(valid => {
          if (valid) {
            let param = {
              phone: this.infoForm.phone,
              password: this.passForm.newPassword
            }
            axios({
              url: getWbeRoot() + 'api/register/changePassword',
              method: 'post',
              data: param
            }).then(response => {
              let data = response.data
              if (data.code === '200') {
                this.active++
                this.startHandler()
              } else {
                this.$notify({
                  title: '提示',
                  message: data.msg
                })
              }
            }, error => {
              console.log(error.message)
            })
          } else {
            console.log('error submit!!')
          }
        })
      }
    },

    // 开始计时
    startHandler () {
      const timeJump = 3
      if (!this.timer) {
        this.count = timeJump
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= timeJump) {
            this.count--
          } else {
            clearInterval(this.timer)
            this.timer = null
            this.back()
          }
        }, 1000)
      }
    }

  }

}
</script>

<style >
.tbody {
  width: 80%;
  margin-left: 10%;
  margin-top: 2%;
}
#one {
  text-align: center;
}
</style>
